<template>
  <view class="bjys">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="title">
      糖蜜福利
    </view>
    <view class="content" v-if="hd">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" autoplay :interval="2000" circular :current="current" @change="change">
          <swiper-item v-for="(item,index) in hd" :key="index" @click="webBtn(item.hd_url)">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="item.hd_pic" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="detail_cont" @click.stop="textBtn(item.t_id)" v-for="(item,index) in tab1list" :key="index"
      v-if="tab1list[0].t_yp == 0">
      <view v-if="!item.t_url.length">
        <view class="styleClass">《{{item.t_name}}》</view>
        <view class="VIP_img" v-if="item.t_vip == 2">
          VIP
        </view>
        <image v-if="item.t_contents.length" :src="item1" v-for="(item1,index1) in item.t_contents" :key="index1" style="width: 32%;" mode="widthFix"></image>
        <rich-text style="padding: 15rpx;" :nodes="item.t_jj"></rich-text>
      </view>
      <view v-else>
        <image :src="item.t_contents" style="width: 100%;" mode="widthFix" @click.stop="jumpBtn2(item.t_url)"></image>
      </view>
    </view>

    <view class="detail_cont" v-for="(item,index) in tab1list" @click="textBtn(item.t_id)" v-if="tab1list[0].t_yp == 1"
      :key="index">
      <view v-if="item.t_yp == 1">
        <view class="styleClass">《{{item.t_name}}》 <image style="width: 30rpx;height: 30rpx;"
            src="https://www.tmtv777.com/img/yp.1bdc5ed1.png" mode=""></image>
        </view>
        <view class="VIP_img" v-if="item.t_vip == 2">
          VIP
        </view>
      </view>
      <view v-else>
        <image :src="item.t_contents" style="width: 100%;" mode="widthFix" @click.stop="jumpBtn2(item.t_url)"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        hd: [],
        current: 0,
        txttype: [],
        tab1list: [],
        txtList1: [],
        page: 1,
        name: ''
      }
    },
    onReachBottom() {
      uni.showLoading({
        title: '加载中'
      })
      this.page++;
      this.$http.txtlist({
        p: this.page,
        t: this.name
      }).then(res => {
        if (res.data.tab1list == null) {
          this.$toast('没有更多了~')
        } else {
          this.tab1list = [...this.tab1list, ...res.data.tab1list];
          uni.hideLoading();
        }
      })
    },
    onLoad(opt) {
      this.name = opt.name;
      this.$http.txtlist({
        p: this.page,
        t: opt.name
      }).then(res => {
        this.tab1list = res.data.tab1list;
      })
      this.$http.indexIn().then(res => {
        if (res.code == 200) {
          this.hd = res.data.hd;
        }
      })
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
        // uni.navigateTo({
        //   url: '/pages/wevview?url=' + url
        // })
      },
      webBtn(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      /**
       * 跳转音频
       */
      textBtn(id) {
        console.log(id)
        uni.navigateTo({
          url: '/pages/other/index2?id=' + id
        })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      change(e) {
        let num = e.detail.current;
        this.current = num;
      },
    }
  }
</script>

<style lang="less">
  .bjys {
    .title {
      margin-top: 20rpx;
      font-size: 32rpx;
      text-align: center;
      color: #FFFFFF;
    }
  }

  .content {
    // background-color: black;
    padding-bottom: 15rpx;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 210rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 440rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;

        image {
          width: 100%;
        }
      }
    }
  }

  .list_detai {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;

    .detail2 {
      width: 100%;
      border-radius: 25rpx;

      image {
        width: 100%;
        border-radius: 25rpx;
      }
    }

    .detail {
      border-radius: 25rpx;
      margin-right: 30rpx;
      width: 45%;

      image {
        width: 100%;
        border-radius: 25rpx;
      }

      p {
        width: 100%;
        text-align: center;
      }
    }
  }

  .detail_cont {
    margin-bottom: 15rpx;
    position: relative;
    min-height: 80rpx;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .detail_cont1 {
    position: relative;
    text-align: center;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      right: 20rpx;
      z-index: 9;
      border-radius: 0rpx 0 0 20rpx;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }

  .play_back {
    width: 60rpx !important;
    height: 60rpx !important;
  }

  // .swiper2_active {
  //   transform: scale(1.4);
  // }
  .a-center {
    color: #384959;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    float: left;
  }

  .styleClass {
    color: #384959;
    margin-bottom: 1px;
    font-weight: 700;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    float: left;
  }
</style>
